<template>

  <el-main>
    <div style="text-align: center">
      <div>
        <el-form :model="flightForm" ref="flightForm">
          <el-select class="srcCity"
                     v-model="flightForm.srcCity"

                     filterable
                     allow-create
                     default-first-option
                     placeholder="出发城市">
            <el-option
                v-for="(item,index) in cities"
                :key="index"
                :value="item">
            </el-option>

          </el-select>&nbsp;
          <el-select class="dstCity"
                     v-model="flightForm.dstCity"
                     filterable
                     allow-create
                     default-first-option
                     placeholder="目的城市">
            <el-option
                v-for="(item,index) in cities"
                :key="index"
                :value="item">
            </el-option>
          </el-select>&nbsp;

          <el-date-picker
              v-model="flightForm.startTime"
              type="date"
              placeholder="选择出发时间"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd">
          </el-date-picker>&nbsp;


          <el-button  v-on:click="submitForm('flightForm')"  type="primary" plain>查询</el-button>&nbsp;
          <el-button v-on:click="resetForm('flightForm')">重置</el-button>



        </el-form><br>














        <div class="container mar-bottom-30 " v-if="flights.length>0">

              <el-table
                  :data="flights"
                  style="width: 100%">
                <el-table-column

                    prop="id"
                    label="航班号"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="airline"
                    label="航空公司"
                    width="80">
                </el-table-column>

                <el-table-column
                  width="60px"
                    prop="srcAirport"
                    label="出发机场">
                </el-table-column>

                <el-table-column
                  width="60px"
                    prop="dstAirport"
                    label="目的机场">
                </el-table-column>
                <el-table-column
                    prop="startTime"
                    label="出发时间"
                    :formatter="formatDate"
                >
                </el-table-column>
                <el-table-column
                    prop="endTime"
                    label="到达时间"
                    :formatter="formatDate"
                >
                </el-table-column>
                <el-table-column
                  width="60px"
                    prop="economicPrice"
                    label="经济价">
                </el-table-column>
                <el-table-column
                  width="60px"
                    prop="advancedPrice"
                    label="头等价">
                </el-table-column>
                <el-table-column
                   width="60px"
                    prop="seatNum"
                    label="总座位数">
                </el-table-column>
                <el-table-column
                  width="60px"
                    prop="advancedNum"
                    label="头等舱数">
                </el-table-column>
                <el-table-column
                  width="60px"
                    label="头等舱剩余">
                  <template v-slot="scope" >
                    {{scope.row.advancedNum-scope.row.advancedCount}}
                  </template>
                </el-table-column>

                <el-table-column
                  width="80px"
                    label="经济舱剩余">
                  <template v-slot="scope" >
                    {{scope.row.seatNum-scope.row.advancedNum-scope.row.seatCount+scope.row.advancedCount}}
                  </template>
                </el-table-column>

                <el-table-column
                    label="操作">
                  <template v-slot="scope">
                    <el-button @click="edit(scope.row.id)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteFlight(scope.row.id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>

              </el-table>





        </div>
      </div>
    </div><br>
  </el-main>

</template>

<script>
import {formatDate} from "@/common/date";


export default {

  name: "queryFlight",
  data(){
    return {


      cities:[
        "开放端口",
        "newYork"
      ],
      flightForm:{
        srcCity:'',
        dstCity:'',
        startTime:'',
        isManager:'true'

      },
      passenger:{
        psengerId:'',
        cardId:'',
        passengerName:'',
        phone:'',
        password:'',
        avatarImg:null,
        nickName:null,
        city:null,
        email:null,
        wechat:null,
      },
      flights:[],
      startTime:''

    }

  },
  created(){
    const _this=this
    this.$axios.get("http://localhost:8181/flight/loadCity")
        .then((resp)=>{
          _this.cities=resp.data
        })
    this.$axios.post('http://localhost:8181/flight/getFlightsByPassenger',this.flightForm)
        .then(function(resp){
          _this.flights=resp.data
          console.log(_this.flights)
        })

  },
  methods:{
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },


    submitForm(formName){
      const _this=this
      console.log(this.flightForm.startTime)

      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post('http://localhost:8181/flight/getFlightsByPassenger',this.flightForm)
              .then(function(resp){
                _this.flights=resp.data
                console.log(_this.flights)
              })
        }

      })
    },
    resetForm(formName){
      this.flightForm.startTime=null;
      this.flightForm.srcCity=null;
      this.flightForm.dstCity=null;
    },
    timeFormat(time){
      var date = new Date(time);
      return formatDate(date,"hh:mm");
    },
    dateFormat(day){
      var date = new Date(day);
      return formatDate(date,"MM-dd");
    },


    deleteFlight(id){
      const _this = this
      axios.delete('http://localhost:8181/flight/deleteFlight/'+id).then(function(resp){
        if(resp.data=='success'){
          _this.$alert('航班'+id+'删除成功！', '消息', {
            confirmButtonText: '确定',
            callback: action => {
              window.location.reload()
            }
          })
        }
        else{
          _this.$message.error('删除失败')
        }

      })
    },
    edit(id) {
      this.$router.push({
        path: '/manager/updateFlight',
        query:{
          id:id
        }
      })
    },

    toPassengerCenter() {
      window.location.href="http://localhost:8080/showBooks"
    },
    toManager() {
      window.location.href="http://localhost:8080/manager"
    },



  },





}
</script>

<style scoped>

</style>
